En ocasiones añadir una pequeña galería de imágenes es necesario, bien para mostrar trabajos o para enlazar contenido destacado.
Esta galería que vamos a ver es muy simple la cree para una plantilla sobre fotografía hace ya bastante tiempo y podemos añadirla en cualquier parte del blog aunque la idea inicial fue añadirla al footer del blog.
         |
Para los estilos localizamos ]]></b:skin> y justo antes añadimos:
/* Galería-footer----------------------------------------------- */.galería-footer {margin-top:5px;overflow:hidden;width:300px !important; /* ancho de la galería */}.galería-footer a {display:block;float:left;margin-right:5px; /* margen derecho */margin-top:1px;}.galería-footer a img {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:#9BBFB7 none repeat scroll 0 0; /* color de fondo de imágenes */border:1px solid #A6A6A6; /* color borde de imágenes */margin:8px 3px; /* espacio entre imágenes y margenes de la galería */opacity:0.2; /* opacidad */padding:6px; /* espacio entre imágenes */}.galería-footer a img:hover {opacity:1; /* opacidad al pasar el cursor */}A continuación en un gadget de HTML del footer añadimos:
<div class="galería-footer"><a href="#" title="foto1"><img alt="foto1" src="url-foto1"/></a><a href="#" title="foto2"><img alt="foto2" src="url-foto2"/></a><a href="#" title="foto3"><img alt="foto3" src="url-foto3"/></a><a href="#" title="foto4"><img alt="foto3" src="url-foto4"/></a><a href="#" title="foto5"><img alt="foto5" src="url-foto5"/></a><a href="#" title="foto6"><img alt="foto6" src="url-foto6"/></a><a href="#" title="foto7"><img alt="foto7" src="url-foto7"/></a><a href="#" title="foto8"><img alt="foto8" src="url-foto8"/></a><a href="#" title="foto9"><img alt="foto9" src="url-foto9"/></a></div>❋ Donde url-foto1-2... añadimos la url de la imagen que mostramos en la galería.
❋ En a href="#" sustituimos la almohadilla por la url del enlace o imagen de mayor tamaño, también podemos mostrar una ventana modal como en el ejemplo.
❋ alt - Indica un texto alternativo.
❋ title - Texto que se muestra en un tooltip al pasar el mouse.
Si deseamos que las imágenes se muestren de mayor tamaño podemos utilizar una ventana modal, en mi caso utilizo Lytebox y puede verse el ejemplo en la primera imagen, la forma de añadirlo a la galería sería:
<a href="url-imagen-grande" rel="lytebox" title="foto1"><img style="width:70px; height:70px; "src="url-miniatura"/></a>
Lo correcto sería añadir dos imágenes una para la miniatura y otra para la imagen de mayor tamaño de no querer ajustar el tamaño a las dos imágenes podemos añadir la misma url para las dos y aplicarle anchura con width y altura con height.
Muy linda, voy a probar de hacerla, :)
gracias
las cosas que buscas a veces llegan simplemente..
bonito, gracias
Estima Gema,
Es mi primera vez comentando en su blog, que aunque soy visitante y lector frecuente no había comentando. Precisamente estoy tratando de hacer la sección de footer para mi blog y me pareció interesante su galería.
Una pregunta: Funciona con la todos los navegadores o solo los mas modernos?
Gracias, y solamente comentarle que al hacer click sobre las imágenes nos manda a blogger para "editar el post".
Un saludo,
Jorge
Como anillo al dedo, probaré si me sale :P
:: Toda tuya La Hormiguita :)
:: Así es Mi tutor a veces llegan sin buscarlas como cuando buscamos una cosa y encontramos otra que ya la habíamos buscado anteriormente sin éxito :)
:: iramucogto.com en los que yo he probado como Firefox, Explorer y Chrome funciona perfectamente.
El sitio donde nos manda el enlace es la url que añadimos en el enlace, te llevará según la url que añadas :)
:: Graciela ya tienes para jugar un rato :D
Excelente información, se agradece. La verdad es que me vendrá muy bien por si algún día decido ponerlo en práctica en el blog.
Enhorabuena por la página!!
Cordiales saludos desde mi blog, Espacio Galáctico.
:: Saludos Marti bienvenido :D
Buenisimo Gema, en cuanto tenga un poco de tiempo haré una galeria para mi blog.
Saludos
:: cuentemelo la galería es muy sencilla y se puede jugar con los estilos para personalizarla a nuestro gusto :)
Hola Gema quisiera que me llevaras al camino correcto quiero poner imagenes en mi blog pero en el pie de pagina, a los lados, en la cabezera como la plantilla de Notepad Chaos como podria hacer eso??
:: Admin lo siento, lo que me estás pidiendo es diseñar una plantilla con imágenes que no sé las que son, tampoco sé de que plantilla estamos hablando, la que se va a diseñar digo.
Es un trabajo que lleva su tiempo yo diría semanas, no es cosa de responder en un comentario :S
:: cuentemelo me alegra que te gustara :)
gracias solo queria saber eso, mmm abran programas para diseñar plantillas?
:: Admin he oído hablar sobre Artisteer pero no sé las funciones que ofrece.
Amiga Esta Galeria no funciona nos posts do blog!Fica toda desalinhada!
Beijos da Suiça para ti mi amada amiga!
:: Saludos Taillard, si funcioa la galería en los post el ejemplo es una muestra de ello.
No he podido acceder a tu blog para ver dónde está el problema.
Hola Gem@, estas publicando la galeria en el footer, yo estoy buscando una galeria para mi blog pero quiero que la apariencia sea similar a la que tienes en el ejemplo de arriba de tal manera que cuando marques cada una de las fotos te lleve a otra subgaleria. No se si me explico, ejemplo; una lugares otra personas otra eventos y cuando clickes en cada una te lleve a esa galeria de lugaes etc, y me gustaria que fuese en un post en una pagina vamos, no en el footer. Ah y la privacidad, son fotos donde aparece la gente de un pueblo y no tengo permiso de todos para publicar las fotos, cual es la mejor opción para blindar la galeria?, CASI NADA... Te agradeceria tu ayuda en este tema, gracias de antemano
Hola Gema, primero que nada, y como siempre, muchas gracias por todo tu esfuerzo y tus materiales. Segundo, la galería me salió preciosa, pero por algún motivo, la primera línea de la cuadrilla sale desalineada. ¿tienes idea de qué puede ser lo que esté haciendo mal? Yo la personalicé bastante, pero andaba mal desde antes de que empezara a tocar el CSS.
Te agradecería infinitamente si pudieras darte una vuelta por mi blog a ver que pasa. Muchísimas gracias :)
:: Hola Ana Laura ese pequeño problema surge cuando la añadimos a una entrada porque el editor altera el orden pero lo puedes solucionar de forma muy sencilla y es la siguiente:
Editas la entrada y modifica de forma que todas las líneas queden seguidas, es decir que entre un código de imagen y otro no queden espacios. Luego prueba a modificar en los estilos el margen derecho aumentándolo en 15 porque ese centrará la galería respecto al fondo.
margin:15px; /* margen derecho */
:: Saludos R35trying, sobre la galería que estás buscando vi una una creada con Mootools y creo que reúne las características que estás buscando, pero no puedo ayudarte con ella porque es una librería que no utilizo :(
Sobre la privacidad la mejor opción es que el blog sea privado y aún así nunca es demasiado seguro. Soy de la opinión que si no queremos mostrar algo mejor no subirlo :O
@Gem@ ¡Sos un amor! Siempre dispuesta a solucionarnos los problemas. Muchísimas gracias, quedó perfecto, y modifiqué el margen como dijiste, queda mucho más equilibrado.
Un saludo grandote y nuevamente gracias :)
:: Estupendo entonces Ana Laura :D
Gracias a ti por venir a contar el resultado ;)
@Gem@Al final me he decantado por esta tuya haciendo un poquito de trampa pero el resultado final de lytebox no es igual que el tuyo, el fondo de la foto es de color blanco y no negro traslucido los bordes son esquinados y peor aun ni play ni pause ni pasar se una foto directamente a ant o post, podrías echarle un vistazo? Te lo agradecería mucho, gracias y un saludo Gem@.
:: R35trying quizás no veas Lytebox de la misma forma porque yo he modificado los estilos y se muestra con esquinas redondeadas y distinto color, pero también es cierto que con Explorer no se distinguen esos estilos.
No he localizado la galería en tu blog ni veo que las imágenes tengan el efecto de Lytebox ¿es el blog de tu perfil?
@Gem@Ayer aún estaba con los toques finales y es posible que te redireccionase a la galería anterior en flickr pero ahora tiene que llevarte a ella, apareceran dos fotos grandes, pincha en la izqda y vas a ella sin perdida, gracias, yo uso firefox, por eso me parece raro. Un saludo.
:: Pues sigo sin verlas, pincho en la fotos de la izquierda y me lleva a la misma imagen :(
Gema gracias por lo que haces, es primera vez que paso por aquí, me gustaría saber cómo le puedo poner (según ejemplo de la primera foto)un botón en el mismo recuadro que expande la foto, un botón para cerrar (a prueba de tontos),para quien sea y de la edad que sea que llegue a mi blog sepa cómo abrir y cerrar ese recuadro, de antemano Gracias Gema!!
No me funciona,e incluso copiando el mismo código que pusiste en tu blog U.U
El que quiero lograr hacer es el de la primera imagen, si ingresas a catálogo en mi blog, verás que no funciona U.U
Ojalá me puedas ayudar
:: Chelo, en el ejemplo lo que se muestra en la primera imagen es una ventana modal, eso hay que añadirlo aparte. Pero si no quieres añadirla lo que se añade sustituyendo la almohadilla es la url de la imagen en mayor tamaño.
Si deseas añadir ventana modal te dejo dos enlaces que pueden servirte
%% Shadowbox
%% Lytebox
hola Gem@, no te asustes, vengo del futuro ehhehe:D una preguntita, si quiero incluir esta galería en el footer en una sola línea horizontal, lo resuelvo solo modificando el ancho? y está definido el tamaño de las imágenes, no lo encontré; y si quiero menos borde que 1px en las imágenes, sería 0,5 por ej? nada más por ahora, hehe gracias genia!!!
:: del batitú dichosos los ojos que te ven :)
Así es, dale más ancho y las imágenes se irán añadiendo en línea.
Sobre el borde que tiene es muy finito, lo que ocurre que le añadí color de fondo y un padding de 6px eso hace que pareca que tiene un borde grueso.
¿Solución? disminuye el padding: 6px ;)
Hola Gem@, estoy re contenta!!! mirá qué linda quedó la galería en un blog que le estoy haciendo a una amiga blogprueba. iba a cambiarle el borde de las fotos, pero quedó perfecto así como estaba. ahora, no te salvas de mis preguntas, ejeje quisiera agregarle en la punta derecha, separada de las otras fotos pero dentro de la galería una imagen link al perfil, cómo separo sólo esa foto de las demás? y si quiero ponerle a cada una un nombre debajo? Gracias GEM@, con mayúsculas!!:P
Hola Gem@, estoy re contenta!!! mirá qué linda quedó la galería en un blog que le estoy haciendo a una amiga blogprueba. iba a cambiarle el borde de las fotos, pero quedó perfecto así como estaba. ahora, no te salvas de mis preguntas, ejeje quisiera agregarle en la punta derecha, separada de las otras fotos pero dentro de la galería una imagen link al perfil, cómo separo sólo esa foto de las demás? y si quiero ponerle a cada una un nombre debajo? Gracias GEM@, con mayúsculas!!1
:: del batitú la mejor forma de añadir contenido al footer es distribuirlo en columnas:
http://gemablog-.blogspot.com/2009/04/columnas-en-el-footer.html
De esa forma puedes añadir las imágenes escogiendo el lugar dónde irán ubicadas.
Para añadir texto debajo de las imágenes yo suelo utilizar una tabla, mira este ejemplo de añadir una lupa es más o menos lo mismo sólo que en lugar de la imagen de la lupa sería el texto:
http://gemablog-.blogspot.com/2009/06/anadiendo-una-lupa.html
Gracias Gem@, perdón por la repetición :O, una mala conexión en día de tormenta :) acá el blog
:: No hay que perdonar nada del batitú.
Vi el blog, me gustan eso tonos :)
Nota: solo los miembros de este blog pueden publicar comentarios.